<template>
  <!-- 服务内容 -->
  <div class="service-box">
    <p class="service-item">
      <slot name="leftIcon"></slot>
      <span class="service-title">{{ title }}</span>
      <slot name="rightIcon"></slot>
    </p>
  </div>
</template>
<script>
export default {
  props: ["title"],
};
</script>
<style lang="less" scoped>
.service-box {
  width: 710px;
  margin-left: 20px;
  padding: 30px 0 24px 0;
  background-color: #fff;
  .service-item {
    position: relative;
    width: 710px;
    height: 44px;
    line-height: 44px;
    .icon {
      position: absolute;
    }
    .leftIcon {
      width: 38px;
      height: 38px;
      top: 3px;
      left: 27px;
    }
    .rightIcon {
      width: 15.6px;
      height: 27.6px;
      right: 27px;
      top: 8.2px;
    }
    .service-title {
      margin-left: 119px;
    }
  }
}
</style>
